
import React, { useState } from 'react';
import { Table,Button } from 'antd';
import { SizeType } from 'antd/es/config-provider/SizeContext';
import request from '@/utils/request';
import { ReloadOutlined } from '@ant-design/icons';

export interface MyDataTableProps {
    columns: any[],
    size?: SizeType,
    freshNum?: number,
    pageSize: number,
    control: string,
    act: string,
    doubleClick?: (item: any) => void,
    rowSelection?:  (item: any) => void,
    showRefresh?: boolean,
    children?: any,
    params?:any,
    bordered?:boolean,
}
const MyDataTable: React.FC<MyDataTableProps> = (props: MyDataTableProps) => {
    const [loading, setLoading] = useState<boolean>(false);
    const [dataSource, setDataSource] = useState<any[]>([]);
    const [pageIndex, setPageIndex] = useState<number>(1);
    const [totalCount, setTotalCount] = useState<number>(0);
    const [selectedRowKeys, setSelectedRowKeys] = useState<any[]>([]);
    const [selectedRows, setSelectedRows] = useState<any[]>([]);

    const reload = () => {
        fetchData()
    }
    const fetchData = (page: number = 1) => {
        const apiURL = "/api/services/app/" + props.control + "/";
        let skipCount = ((page >= 1 ? page : pageIndex) - 1) * props.pageSize
        setLoading(true)
        request(apiURL + props.act, {
            method: 'GET',
            params: {
                skipCount,
                maxResultCount: props.pageSize,
                ...props.params
            },
        }).then((response) => {
            if (response) {
                if (response.success) {
                    setTotalCount(response.result.totalCount)
                    setDataSource(response.result.items)
                }
            }
            setLoading(false)
        });
    }
    const changePage = (page: number) => {
        setPageIndex(page)
        fetchData(page)
    }
    const rowSelection = {
        selectedRowKeys,
        onChange: (selectedRowKeys: any, selectedRows: any) => {
            setSelectedRowKeys(selectedRowKeys);
            setSelectedRows(selectedRows);
            if (props.rowSelection)
                props.rowSelection(selectedRows)
        },
    };
    React.useEffect(() => {
        setLoading(true)
        fetchData()
    }, [props.freshNum])
    return (
        <>
            {props.children}
            <Table
                rowKey="id"
                rowSelection={rowSelection}
                size={props.size} columns={props.columns}
                loading={loading}
                dataSource={dataSource}
                bordered={props.bordered}
                onRow={record => {
                    return {
                        onDoubleClick: event => { props.doubleClick ? props.doubleClick(record) : undefined },
                    };
                }}                
                pagination={{
                    onChange: page => {
                        changePage(page)
                    },
                    pageSize: props.pageSize,
                    total: totalCount,
                    showTotal: total => (<span>共 {total} 条 <Button type="default" onClick={reload} loading={loading} hidden={!props.showRefresh} icon={<ReloadOutlined />} /></span>)//`共 ${total} 条`

                }} />
        </>
    )
}
export default MyDataTable;